import React, { useEffect, useRef, useState } from 'react';

import styled from 'styled-components';

import style from '../../assets/styles/global-style';

import { prefixStyle } from "../../api/utils";

const ProgressBarWrapper = styled.div`
  height: 30px;
  .bar-inner {
    position: relative;
    top: 13px;
    height: 4px;
    background: rgba(0, 0, 0, .3);
    .progress {
      position: absolute;
      height: 100%;
      background: ${style["theme-color"]};
    }
    .progress-btn-wrapper {
      position: absolute;
      left: -15px;
      top: -13px;
      width: 30px;
      height: 30px;
      .progress-btn {
        position: relative;
        top: 7px;
        left: 7px;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        border: 3px solid ${style["border-color"]};
        border-radius: 50%;
        background: ${style["theme-color"]};
      }
    }
  }
`;
const ProgressBar = (props) => {
    // 取出回调函数
    const {percentChange} = props;
    // 进度条
    const progressBar = useRef();
    const progress = useRef();
    const progressBtn = useRef();
    // 拖动
    const [touch, setTouch] = useState ({});
    const progressBtnWidth = 8;

    const _changePercent = () => {
        const barWidth = progressBar.current.clientWidth - progressBtnWidth;
        const curPercent = progress.current.clientWidth/barWidth;// 新的进度计算
        percentChange(curPercent);// 把新的进度传给回调函数并执行
    };
    // 处理进度条的偏移
    const _offset = (offsetWidth) => {
        // 进度条的宽度
        progress.current.style.width = `${offsetWidth}px`;
        // 按钮的移动位置
        progressBtn.current.style.transform = `translate3d(${offsetWidth}px, 0, 0)`;
    };
    const progressTouchStart = (e) => {
        const startTouch = {};
        startTouch.initiated = true;//initial 为 true 表示滑动动作开始了
        startTouch.startX = e.touches[0].pageX;// 滑动开始时横向坐标
        startTouch.left = progress.current.clientWidth;// 当前 progress 长度

        setTouch(startTouch);
    };
    const progressTouchMove = (e) => {
        if (!touch.initiated) return;
        // 滑动距离
        const deltaX = e.touches[0].pageX - touch.startX;
        const barWidth = progressBar.current.clientWidth - progressBtnWidth;
        const offsetWidth = Math.min (Math.max (0, touch.left + deltaX), barWidth);
        _offset(offsetWidth);
    };
    const progressTouchEnd = (e) => {
        const endTouch = JSON.parse(JSON.stringify (touch));
        endTouch.initiated = false;
        setTouch(endTouch);
        // _changePercent();
    };
    const progressClick = (e) => {
        const rect = progressBar.current.getBoundingClientRect();
        const offsetWidth = e.pageX - rect.left;
        // console.log(offsetWidth);
        if (offsetWidth <= 225) {
            _offset(offsetWidth);
            // _changePercent();
        }
    };
    return(
        <ProgressBarWrapper>
            <div className="bar-inner" ref={progressBar} onClick={progressClick}>
                <div className="progress" ref={progress}></div>
                <div className="progress-btn-wrapper" ref={progressBtn}
                     onTouchStart={progressTouchStart}
                     onTouchMove={progressTouchMove}
                     onTouchEnd={progressTouchEnd}
                >
                    <div className="progress-btn"></div>
                </div>
            </div>
        </ProgressBarWrapper>
    )
};

export default React.memo(ProgressBar)